<template>
  <div class="about">
    <h1 style="text-align: center">我的信息</h1>
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="账号名">
        <a-input v-model="formState.userAccount" />
      </a-form-item>
      <a-form-item label="用户名">
        <a-input v-model="formState.userName" />
      </a-form-item>
      <a-form-item label="创建时间">
        <a-input v-model="formState.createTime" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { UserControllerService, UserVO } from "../../generated";
import { Moment } from "moment";
import { defineComponent, reactive, toRaw, onMounted } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useStore } from "vuex";

const store = useStore();

interface FormState {
  userAccount: string;
  userName: string;
  createTime: string;
}

var formState = reactive({
  userAccount: "",
  userName: "",
  createTime: "",
} as UserVO);

const loadData = async (id: number) => {
  const res = await UserControllerService.getUserVoByIdUsingGet(id);
  if (res.code === 0) {
    console.log("res.data: ", res.data);
    formState.createTime = res.data?.createTime;
    formState.userName = res.data?.userName;
    console.log("formState: ", formState);
    formState.userAccount = res.data?.userAccount;
  } else {
    message.error("用户信息获取失败，未登录"); // +res.message
  }
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData(store.state.user.loginUser.id);
});
</script>
